<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>配置表单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../../../style/free.css">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../component/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/style.min862f.css">
    <style>
        html{
            font-size: 20px;
        }
        #backgroundColor,#backgroundColor .el-color-picker__trigger{
            height: 25px;
        }
        #backgroundColor .el-color-picker__trigger{
            height: 25px;
            width: 25px;
            padding: 2px;
        }
    </style>
</head>

<body style="background-color:#f7f5f6;">
    <div id="app" v-cloak>
        <yl-page-header content="修改组件"></yl-page-header>
        <div id="config" style="display: flex; margin-top: 20px;">
            <!-- 自定义组件 -->
            <div id="colyou" style="flex-shrink: 0; width: 250px; height: calc(100vh - 40px); background-color: #fff;">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>自定义组件</h5>
                    </div>
                </div>
                <div class="ibox-content" style="margin: 0 5px auto;">
                    <form role="form" class="form-horizontal m-t">
                        <p><b>常用项</b></p>
                        <table>
                            <tr v-for="(arr,i) in table" :key="i">
                                <td @click="handleComponent(item)" v-for="(item,index) in arr" :key="index">
                                    <div :data-component="JSON.stringify(item)" class="draggable ui-draggable btntexts">
                                        {{item.name}}
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <p><b>布局</b></p>
                        <div v-for="(item,index) in layer" :key="index" @click="handleComponent(item)" :data-component="JSON.stringify(item)" class="form-group draggable ui-draggable btntext">
                            <label class="col-sm-12"><i class="fa fa-arrows"></i> {{item.name}}</label>
                        </div>
                    </form>
                </div>
            </div>
            <div id="colzuo" style="width: 100%; height: calc(100vh - 40px);">
                <div class="ibox float-e-margins" style="margin: 0 15px;">
                    <div class="ibox-title">
                        <div class="ibox-tools">
                            <el-button size="mini" @click="window.history.back()">返回</el-button>
                            <el-button type="warning" size="mini" @click="$store.state.hide = !$store.state.hide">{{$store.state.hide?'显示区域':'隐藏区域'}}</el-button>
                            <!-- <el-button type="warning" size="mini" @click="dialogVisible = true">复制代码</el-button> -->
                            <el-button type="success" size="mini" @click="dialogVisible = true">保存提交</el-button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <!-- 存放拖拽 -->
                        <div class="row form-body form-horizontal m-t">
                            <div class="col-md-6 droppable sortable ui-droppable ui-sortable" :style="style">
                                <render :data="instantiate" @copy="handleComponent" @remove="handleRemove"></render>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="colconfig" style="flex-shrink: 0;width: 30%;height: calc(100vh - 40px);background-color: #fff;overflow-y: auto;">
                <div style="margin: 0 5px;">
                    <div class="table_titel">
                        <div class="titel">默认背景</div>
                    </div>
                    <el-descriptions :column="2" border size="small">
                        <el-descriptions-item label="背景图片">
                            <yl-upload unslider :base="BASE_IMG" v-model="background.backgroundImage"></yl-upload>
                        </el-descriptions-item>
                        <el-descriptions-item label="适应类型">
                            <el-select style="width:100%" v-model="background.backgroundSize" clearable  placeholder="请选择适应类型">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-descriptions-item>
                        <el-descriptions-item label="是否固定">
                            <el-switch v-model="background.backgroundAttachment" active-text="是" inactive-text="否"></el-switch>
                        </el-descriptions-item>
                        <el-descriptions-item label="是否重复">
                            <el-select style="width:100%" v-model="background.backgroundRepeat" clearable placeholder="请选择适应类型">
                                <el-option v-for="item in repeat" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-descriptions-item>
                        <el-descriptions-item label="背景颜色">
                            <el-color-picker v-model="background.backgroundColor" show-alpha></el-color-picker>
                        </el-descriptions-item>
                    </el-descriptions>
                    <component v-if="config.config" :id="config.id" :is="config.config" :data="config.data" :slot="config.slot">
                        <template v-if="config.title=='row'" v-slot:default>
                            <component v-for="(item,id) in config.slot" :key="id" :data="item.data" :slot="item.slot" :id="item.id" :is="item.config"></component>
                        </template>
                    </component>
                </div>
            </div>
        </div>
        <submit-edit-dialog :data="instantiate" :form="form" :background="background" :visible.sync="dialogVisible"></submit-edit-dialog>
    </div>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../utils/jweixin.js"></script>
    <script type="text/javascript" src="../../../utils/Sortable.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../utils/beautifyhtml.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../components/utils.js"></script>
    <script type="text/javascript" src="js/edit.js"></script>
    
    <script src="../../components/LayOut.js"></script>
    <script src="../../components/activityProducts.js"></script>
</body>

</html>